<template>
<div>
  <zh-form
      :span="6"
      ref="rolePageFrom"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :model="formData"
      :rules="rules">

    <div style="padding: 15px 20px">
      <zh-row>
        <zh-input
            prop="b0102"
            :disabled="disabled"
            type="text"
            label="点位名称"
            v-model="formData.b0102"
            @blur="getB01Info"
        ></zh-input>
        <zh-input
            prop="b0107"
            :disabled="true"
            type="text"
            label="点位区划"
            v-model="formData.b0107"
        ></zh-input>
        <zh-input
            prop="h0302"
            :disabled="disabled"
            type="text"
            label="地址"
            v-model="formData.h0302"
        ></zh-input>
        <zh-input
            prop="h0303"
            :disabled="disabled"
            type="select"
            label="保护级别"
            :options="dictData.h0303"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            v-model="formData.h0303"
        ></zh-input>
        <zh-input
            prop="h0304"
            :disabled="disabled"
            type="select"
            :options="dictData.h0304"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            label="工程类型"
            v-model="formData.h0304"
        ></zh-input>
        <zh-input
            prop="h0305"
            :disabled="disabled"
            type="text"
            label="责任主体"
            v-model="formData.h0305"
        ></zh-input>
        <zh-input
            prop="h0306"
            :disabled="disabled"
            type="text"
            label="承建单位"
            v-model="formData.h0306"
        ></zh-input>
        <zh-input
            prop="h0307"
            :disabled="disabled"
            type="text"
            label="项目负责人"
            v-model="formData.h0307"
        ></zh-input>
        <zh-input
            prop="h0308"
            :disabled="disabled"
            type="text"
            label="投入资金"
            v-model="formData.h0308"
        ></zh-input>
        <zh-input
            prop="h0310"
            :disabled="disabled"
            type="select"
            :options="dictData.h0310"
            :defaultFields="{ label: 'dictValue', value: 'dictKey' }"
            label="当前进度"
            v-model="formData.h0310"
        ></zh-input>
        <zh-input
            prop="h0309"
            :disabled="disabled"
            type="date"
            label="完成时间"
            v-model="formData.h0309"
        ></zh-input>
        <zh-input
            prop="h0314"
            :disabled="disabled"
            type="text"
            label="项目名称"
            v-model="formData.h0314"
        ></zh-input>
      </zh-row>
    </div>
  </zh-form>

<!--  <a-row >-->
<!--    <a-col >-->
<!--      <a-form-model-item label="工程简介：">-->
<!--        <a-textarea-->
<!--            v-model="formData.h0311"-->
<!--            :disabled="disabled"-->
<!--            :rows="3"-->
<!--        />-->
<!--      </a-form-model-item>-->
<!--    </a-col>-->
<!--  </a-row>-->

   <span style="font-size: 26px;color: #272727">工程情况：</span>
    <!-- <a-textarea
        v-model="formData.h0312"
        :disabled="disabled"
        :rows="3"
    /> -->


  <!--上传图片视频 -->

  <zh-form
      :span="5"
      ref="rolePageFrom2"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      :rules="rules"
  >
    <div style="width: 100%; padding: 0 20px">
      <div style="text-align: left;margin-top: 10px" v-if="disabled === false">
        <!-- <ep-button
            icon="add.svg"
            size="small"
            type="primary"
            @click="addMediaInfo"
        >添加材料
        </ep-button> -->
      </div>
      <ep-button
        style="margin-top: 10px"
        size="default"
        icon="add.svg"
        @click="
            () => {
              this.addModel();
            }
          "
    >新增模块
    </ep-button>
    <div v-for="(e, h04Index) in h04VOList" :key="h04Index" v-if="render">
      <div class="operate">
        <div style="width: 10%;">标题</div>
        <div style="width: 90%">
          <a-input placeholder="请输入标题" v-model="e.h0402"/>
        </div>
      </div>
      <div class="operate">
        <div style="width: 10%;">简介</div>
        <div style="width: 90%">
          <a-textarea placeholder="请输入简介" :auto-size="{ minRows: 3, maxRows: 6 }" v-model="e.h0403"/>
        </div>
      </div>
      <div class="operate">
        <div style="width: 10%;">多媒体</div>
        <div style="width: 90%;display: block">
          <div style="text-align: right;width: 100%">
            <ep-button
                icon="add.svg"
                size="small"
                type="primary"
                @click="addMediaInfo(h04Index)"
            >添加
            </ep-button>
          </div>
          <div>
            <ul class="media-wrap">
              <li v-for="(item, index) in e.h13VOList" :key="index">
                <div class="item special">
                  <div class="desc">序号</div>
                  <p>{{ item.h1307 }}</p>
                </div>
                <div class="item">
                  <div class="desc">媒体类型</div>
                  <p>{{ item.h1302Name }}</p>
                </div>
                <div class="item">
                  <div class="desc">缩略图</div>
                  <template v-if="item.h1302Name === '图片'">
                    <img
                        v-if="item.h1304"
                        :src="fileShowUrl + item.h1304"
                        @click="checkImg(item.h1304)"
                        alt=""
                    />
                  </template>
                  <template v-else>
                    <img
                        v-if="item.h1306"
                        :src="fileShowUrl + item.h1306"
                        @click="checkImg(item.h1306)"
                        alt=""
                    />
                  </template>
                </div>
                <div class="item">
                  <div class="desc">名称</div>
                  <p>{{ item.h1303 }}</p>
                </div>
                <div class="item" v-if="item.h1302Name !== '全景'">
                  <div class="desc">文件名称</div>
                  <p>{{ item.h1305 }}</p>
                </div>
                <div class="item" v-if="item.h1302Name === '全景'">
                  <div class="desc">链接</div>
                  <p>{{ item.h1304 }}</p>
                </div>
                <div class="item">
                  <div class="desc"></div>
                  <div class="btn-wrap">
                    <ep-button
                        size="small"
                        icon="edit.svg"
                        :disabled="disabled"
                        @click="editMediaInfo(item,index,h04Index)"
                    >编辑
                    </ep-button>

                    <ep-button
                        size="small"
                        type="danger"
                        icon="del.svg"
                        :disabled="disabled"
                        @click="deleteMediaInfo(index,h04Index)"
                        style="margin-left: 15px"
                    >删除
                    </ep-button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <protect-project-media ref="mediaInfoItem"  :disabled="disabled"></protect-project-media>
    </a-modal>
  </zh-form>
</div>
</template>

<script>
import {fileShowUrl, getBatchDict} from "@/services/system/api";
import {
  getPointInfoByName,
  protectionProjectAdd,
  getProtectionProjectDetails,
} from "@/services/system/whdngxlApi";
import modal from "ant-design-vue/lib/modal";
import protectProjectMedia from "@/pages/system/form/protectProjectMedia";
export default {
  name: "ProtectionProjectAddForm",
  components: {
    protectProjectMedia,
  },
  props:{
    listQuery:{
      type:Function,
      default:null
    }
  },
  data() {
    return {
      dictData: {},
      disabled: false,
      formData: {
        b0102:'',
        b0101:'',
        h0301:'',
        b0107:'',
        h0302:'',
        h0303:'',
        h0304:'',
        h0305:'',
        h0306:'',
        h0307:'',
        h0308:'',
        h0309:'',
        h0310:'',
        h0311:'',
        h0312:'',
        h0314:'',
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      rules: {},
      h04VOList: [{
        h0402: '',
        h0403: '',
        h13VOList: [],
      }],
      h04VOItem: {
        h0402: '',
        h0403: '',
        h13VOList: [],
      },
      h13VOListDel: [],

      modalTitle:'',
      h13VOList:[],
      h1307Num: 0,
      visible:false,
      fileShowUrl: fileShowUrl, //预览接口地址
      render: true,
      h04Index: -1,
    };
  },
  created() {
    const params = {}
    params.dictFields = 'h0303,h0304,h0310'
    this.$http.post(getBatchDict, params).then(res => {
      this.dictData = res.result
    })
  },
  methods: {
    initData(row,operate){
      this.disabled = operate === 'view'
      if(row.h0301){
        const params = {};
        params.h0301 = row.h0301
        setTimeout(() => {
          this.$http
              .post(getProtectionProjectDetails, params)
              .then((res) => {
                if(res.result) {
                  this.formData = res.result
                  this.h04VOList = res.result.h04VOList
                  debugger
                }
              })
              .catch((error) => {
              })
              .finally(() => {});
        }, 50);
      }
    },
    //根据点位名称获取点位信息
    getB01Info(){
      this.formData.b0107 = ''
      if(this.formData.b0102 != '' && this.formData.b0102 != null){
        const params = {};
        params.b0102 = this.formData.b0102
        setTimeout(() => {
          this.$http
              .post(getPointInfoByName, params)
              .then((res) => {
                if(res.result.b0101){
                  this.formData.b0101 = res.result.b0101
                  this.formData.b0107 = res.result.b0107
                }else{
                  this.$message.info("根据点位名称未查询到点位信息，请重新输入！");
                }
              })
              .catch((error) => {
              })
              .finally(() => {});
        }, 50);
      }
    },
    getListSize(list) {
      this.h1307Num = 0;
      list.forEach((item) => {
        if (item.h1307 > this.h1307Num) {
          this.h1307Num = item.h1307;
        }
      });
      if (this.h1307Num < list.length) {
        this.h1307Num = list.length-1;
      }
      this.h1307Num++;
    },
    //新增
    addMediaInfo(index) {
      this.modalTitle = "新增";
      this.visible = true;
      this.h04Index = index
      this.$nextTick(() => {
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        this.getListSize(this.h04VOList[this.h04Index].h13VOList);
        this.$refs.mediaInfoItem.h1307Num = this.h1307Num;
        this.$refs.mediaInfoItem.init(null);
      });
    },
    //编辑
    editMediaInfo(row,index,h04Index) {
      this.modalTitle = "编辑";
      this.editIndex = index;
      this.h04Index = h04Index;
      this.visible = true;
      debugger
      this.$nextTick(() => {
        this.h04Index = h04Index;
        this.$refs.mediaInfoItem.editFlag = this.editFlag;
        if (row.h0401) {
          row.flag = "edit";
        }
        this.$refs.mediaInfoItem.init(row);
      });
    },
    //确定
    handleForm() {
      var mediaInfoItem = this.$refs.mediaInfoItem.mediaInfoItem;
      if (this.modalTitle === "新增") {
        mediaInfoItem.flag = "save";
        console.log(this.h04Index)
        console.log(this.h04VOList)
        this.h04VOList[this.h04Index].h13VOList.push(mediaInfoItem);
        console.log(this.h04VOList)
      } else {
        this.h04VOList[this.h04Index].h13VOList.splice(this.editIndex, 1, mediaInfoItem);
      }
      this.$nextTick(() => {
        this.visible = false;
      });
      console.log(this.h04VOList[this.h04Index].h13VOList)
    },
    deleteMediaInfo(index, h04Index) {
      modal.confirm({
        title: "确认删除吗？",
        onOk: () => {
          if ( this.h04VOList[h04Index].h13VOList[index].h1301) {
            const item = JSON.parse(JSON.stringify(this.h04VOList[h04Index].h13VOList[index]));
            item.flag = "delete";
            this.h13VOListDel.push(item);
          }
          this.h04VOList[h04Index].h13VOList.splice(index, 1);
        },
        onCancel: () => {},
      });
    },
    checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    saveData(){
      if(this.formData.b0101 == '' || this.formData.b0101 == null ){
        modal.warn({ title: "提示", content: "请先输入点位名称查询点位信息" });
        return;
      }
      this.$loading.show('正在处理数据,请等待...')
      const params = Object.assign(this.formData)
      params.h04VOList = this.h04VOList
      params.h13VOList = this.h13VOList
      params.h13VOListDel = this.h13VOListDel
      setTimeout(() => {
        this.$http.post(protectionProjectAdd, params).then((res) => {
          this.$message.info('保存成功')
          this.$emit("handleCancel")
          if(this.listQuery){
            this.listQuery()
          }
          this.$loading.hide()
        }).catch((error) => {
          console.log(JSON.stringify(error))
          this.$loading.hide()
        }).finally(() =>{
        })
      }, 50)
    },
    addModel() {
      if(this.h04VOList == undefined){
        this.h04VOList = []
      }
      this.h04VOList.push(JSON.parse(JSON.stringify(this.h04VOItem)))
      this.render = false
      setTimeout(() => {
        //页面无法更新渲染，先用v-if处理
        this.render = true
      }, 100)
    },
  },
}

</script>

<style lang="less" scoped>
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 10px;


  > div {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }


}
.media-wrap {
  margin-top: 15px;
  li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      flex: 0 0 auto;
      width: 18%;
      .desc {
        width: 100%;
        height: 21px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        width: 100%;
        height: 32px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #3e9fc8;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn-wrap {
        text-align: center;
      }
      img {
        width: auto;
        height: 90px;
        max-width: 98%;
        vertical-align: middle;
        cursor: pointer;
      }
      &.special {
        width: 5%;
      }
    }
  }
}
</style>